<template>
	<view class="container">
		<!-- 顶部信息栏 -->
		<view class="header">
			<view class="profile">
				<image class="avatar" src="/static/avatar-placeholder.png"></image>
				<view class="info">
					<text class="name">王小明</text>
					<text class="grade">初中二年级 · NOIP普及组</text>
				</view>
			</view>
			<view class="action">
				<view class="notification">
					<uni-icons type="notification-filled" size="24" color="#333"></uni-icons>
					<view class="badge" v-if="unreadCount > 0">{{unreadCount}}</view>
				</view>
			</view>
		</view>

		<!-- 学习概况 -->
		<view class="overview-card">
			<view class="card-header">
				<text class="title">学习概况</text>
				<text class="subtitle">本周数据</text>
			</view>
			<view class="stats-row">
				<view class="stat-item">
					<text class="value">{{weekData.practiceCount}}</text>
					<text class="label">练习题目</text>
				</view>
				<view class="stat-item highlight">
					<text class="value">{{weekData.accuracy}}%</text>
					<text class="label">平均正确率</text>
					<view class="trend up" v-if="weekData.accuracyTrend > 0">
						<uni-icons type="arrow-up" size="12" color="#2fc25b"></uni-icons>
						<text>{{weekData.accuracyTrend}}%</text>
					</view>
					<view class="trend down" v-else-if="weekData.accuracyTrend < 0">
						<uni-icons type="arrow-down" size="12" color="#f04864"></uni-icons>
						<text>{{Math.abs(weekData.accuracyTrend)}}%</text>
					</view>
				</view>
				<view class="stat-item">
					<text class="value">{{weekData.studyTime}}</text>
					<text class="label">学习时间(h)</text>
				</view>
			</view>
		</view>

		<!-- 知识点掌握图 -->
		<view class="chart-card">
			<view class="card-header">
				<text class="title">知识点掌握</text>
				<text class="more" @click="navigateToDetail">详情 ></text>
			</view>
			<view class="charts-box">
				<qiun-data-charts 
					type="radar" 
					:opts="{
						legend:{position: 'bottom'},
						extra:{radar:{gridType:'circle'}}
					}" 
					:chartData="knowledgeRadarData"
				/>
			</view>
		</view>

		<!-- 核心功能导航 -->
		<view class="nav-grid">
			<view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="navigateTo(item.url)">
				<view class="nav-icon" :style="{backgroundColor: item.bgColor}">
					<uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
				</view>
				<text class="nav-text">{{item.name}}</text>
			</view>
		</view>

		<!-- 比赛推荐 -->
		<view class="competition-card">
			<view class="card-header">
				<text class="title">推荐比赛</text>
				<text class="more" @click="navigateToCompetitions">更多 ></text>
			</view>
			<view class="competition-list">
				<view class="competition-item" v-for="(comp, index) in recommendCompetitions" :key="index">
					<view class="comp-date">
						<text class="month">{{comp.month}}月</text>
						<text class="day">{{comp.day}}</text>
					</view>
					<view class="comp-info">
						<text class="comp-name">{{comp.name}}</text>
						<text class="comp-desc">{{comp.description}}</text>
						<view class="comp-match">
							<text class="match-text">契合度：</text>
							<view class="match-stars">
								<uni-icons v-for="i in 5" :key="i" :type="i <= comp.matchLevel ? 'star-filled' : 'star'" size="12" :color="i <= comp.matchLevel ? '#ffcc33' : '#cccccc'"></uni-icons>
							</view>
							<text class="match-desc">{{comp.matchDesc}}</text>
						</view>
					</view>
					<view class="comp-action">
						<text class="comp-btn">报名</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 学习进度 -->
		<view class="progress-card">
			<view class="card-header">
				<text class="title">备赛进度</text>
				<text class="more" @click="navigateToProgress">详情 ></text>
			</view>
			<view class="progress-info">
				<text class="progress-title">{{currentCompetition.name}}备赛计划</text>
				<view class="progress-bar">
					<view class="progress-inner" :style="{width: currentCompetition.progress + '%'}"></view>
				</view>
				<view class="progress-detail">
					<text class="progress-percent">{{currentCompetition.progress}}%</text>
					<text class="progress-desc">{{currentCompetition.progressDesc}}</text>
				</view>
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(task, index) in currentCompetition.tasks" :key="index">
					<view class="task-checkbox" :class="{checked: task.completed}" @click="toggleTask(index)">
						<uni-icons v-if="task.completed" type="checkbox-filled" size="18" color="#2fc25b"></uni-icons>
					</view>
					<view class="task-content">
						<text class="task-title" :class="{completed: task.completed}">{{task.title}}</text>
						<text class="task-due">{{task.dueDate}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unreadCount: 3,
				weekData: {
					practiceCount: 20,
					accuracy: 80,
					accuracyTrend: 5,
					studyTime: 8.5
				},
				knowledgeRadarData: {
					categories: [
						"数据结构",
						"搜索算法",
						"动态规划",
						"贪心算法",
						"图论",
						"数学"
					],
					series: [
						{
							name: "掌握度",
							data: [90, 75, 65, 85, 60, 70]
						},
						{
							name: "班级平均",
							data: [75, 65, 60, 70, 55, 65]
						}
					]
				},
				navItems: [
					{ name: "学习报告", icon: "chart", url: "/pages/report/index", bgColor: "#1890ff" },
					{ name: "比赛推荐", icon: "medal", url: "/pages/competition/index", bgColor: "#ff9a2f" },
					{ name: "备赛计划", icon: "calendar", url: "/pages/plan/index", bgColor: "#2fc25b" },
					{ name: "知识库", icon: "help", url: "/pages/knowledge/index", bgColor: "#9254de" }
				],
				recommendCompetitions: [
					{
						month: "10",
						day: "15",
						name: "NOIP 普及组",
						description: "全国青少年信息学奥林匹克联赛普及组",
						matchLevel: 4,
						matchDesc: "非常适合"
					},
					{
						month: "11",
						day: "20",
						name: "CSP-J 认证",
						description: "计算机软件能力认证-入门级",
						matchLevel: 5,
						matchDesc: "完美匹配"
					}
				],
				currentCompetition: {
					name: "NOIP 2023",
					progress: 65,
					progressDesc: "按时完成",
					tasks: [
						{
							title: "完成5道动态规划题目",
							dueDate: "今日截止",
							completed: true
						},
						{
							title: "参加周末模拟赛",
							dueDate: "10月12日截止",
							completed: false
						},
						{
							title: "复习图论算法",
							dueDate: "10月15日截止",
							completed: false
						}
					]
				}
			}
		},
		onLoad() {

		},
		methods: {
			navigateToDetail() {
				uni.navigateTo({
					url: '/pages/report/detail'
				})
			},
			navigateToCompetitions() {
				uni.navigateTo({
					url: '/pages/competition/index'
				})
			},
			navigateToProgress() {
				uni.navigateTo({
					url: '/pages/plan/index'
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			toggleTask(index) {
				this.currentCompetition.tasks[index].completed = !this.currentCompetition.tasks[index].completed
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.profile {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.grade {
		font-size: 24rpx;
		color: #666;
		margin-top: 4rpx;
	}

	.notification {
		position: relative;
	}

	.badge {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		background-color: #ff4d4f;
		color: #fff;
		font-size: 18rpx;
		min-width: 28rpx;
		height: 28rpx;
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
	}

	.overview-card, .chart-card, .competition-card, .progress-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.subtitle {
		font-size: 24rpx;
		color: #999;
	}

	.more {
		font-size: 24rpx;
		color: #1890ff;
	}

	.stats-row {
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 0;
		width: 30%;
	}

	.highlight {
		background-color: #f0f9ff;
		border-radius: 12rpx;
	}

	.value {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.2;
	}

	.label {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.trend {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		margin-top: 8rpx;
	}

	.up {
		color: #2fc25b;
	}

	.down {
		color: #f04864;
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
	}

	.nav-grid {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}

	.nav-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.nav-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.nav-text {
		font-size: 24rpx;
		color: #333;
	}

	.competition-list {
		display: flex;
		flex-direction: column;
	}

	.competition-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.comp-date {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		margin-right: 20rpx;
	}

	.month {
		font-size: 22rpx;
		color: #999;
	}

	.day {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.comp-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.comp-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.comp-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.comp-match {
		display: flex;
		align-items: center;
	}

	.match-text {
		font-size: 22rpx;
		color: #999;
	}

	.match-stars {
		display: flex;
		margin: 0 10rpx;
	}

	.match-desc {
		font-size: 22rpx;
		color: #ff9a2f;
	}

	.comp-action {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 20rpx;
	}

	.comp-btn {
		padding: 10rpx 30rpx;
		background-color: #1890ff;
		color: #fff;
		font-size: 26rpx;
		border-radius: 30rpx;
	}

	.progress-info {
		margin-bottom: 20rpx;
	}

	.progress-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
	}

	.progress-bar {
		height: 14rpx;
		background-color: #f0f0f0;
		border-radius: 7rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.progress-inner {
		height: 100%;
		background-color: #2fc25b;
		border-radius: 7rpx;
	}

	.progress-detail {
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		color: #666;
	}

	.task-list {
		margin-top: 20rpx;
	}

	.task-item {
		display: flex;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.task-checkbox {
		width: 36rpx;
		height: 36rpx;
		border-radius: 18rpx;
		border: 2rpx solid #ddd;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checked {
		border-color: #2fc25b;
		background-color: #f0fff0;
	}

	.task-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.task-title {
		font-size: 26rpx;
		color: #333;
	}

	.completed {
		color: #999;
		text-decoration: line-through;
	}

	.task-due {
		font-size: 22rpx;
		color: #ff4d4f;
		margin-top: 6rpx;
	}
</style>
